<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Martrix</title>
    <style>
        body{
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
   <canvas id="canvas" style="background:#000;"></canvas>
   <script>
    window.onload = function(){
		var canvas = document.getElementById('canvas');
		var context = canvas.getContext('2d');
		var w = canvas.width = window.innerWidth;
		var h = canvas.height = window.innerHeight;
		
		// 初始化
		var clearColor = 'rgba(0, 0, 0, .1)';
		var wordColor = '#33ff33';
		var words = '曾琪琪罗琴王毅廖瑞钟振宇良玉吴金浩邹巧黄光铭李慧浩壹上来了成都蜀美网络技术有限公司';
		var wordsArr = words.split('');
		var font_size = 20;
		var clumns = w / font_size;
		drops = [];
		
		for (var i = 0; i < clumns; i++) {
			drops[i] = 1;
		}
		
		function draw(){
			context.save();
			context.fillStyle = wordColor;
			context.font = font_size + "px 微软雅黑";
			
			for (var i = 0; i < drops.length; i++) {
				var text = wordsArr[Math.floor(Math.random() * wordsArr.length)];
				context.fillText(text, i * font_size, drops[i] * font_size);
				if (drops[i] * font_size > h && Math.random() > 0.98) {
					drops[i] = 0;
				}
				drops[i]++;
				
			}
			context.restore();
		}
		
		(function drawFrame(){
			window.requestAnimationFrame(drawFrame, canvas);
			context.fillStyle = clearColor;
			context.fillRect(0, 0, w, h);
			
			draw();
		}())
		
	
	}
   </script>
</body>
</html>